<template>
	<view class="warp">
		<view class="head">
			<up-navbar title="发货订单" titleWidth="500" leftIconSize="0" rightIcon='search'>
			</up-navbar>
		</view>

		<view class="middle">
			<view class="">
				<up-card :show-head='false' v-for="(item,index) in orderList " @click="orderDetails">
					<template #body>
						<view class="" style="display: flex;align-items: center;">
							<up-icon name="order" size="25" color="#d98f41" />
							<text>{{item.orederNo}}</text>
						</view>
						<view class="" style="display: flex;align-items: center;">
							<up-checkbox usedAlone shape="circle" v-model:checked="item.isChecked" />
							<up-image :src="item.imgUrl" shape="circle" width="120rpx" height="120rpx"
								style="margin: 30rpx 30rpx 0 30rpx;" />
							<view class="" style="display: flex;flex-direction: column;">
								<text>{{item.scholl}}</text>
								<text>收货时间:{{item.date}}</text>
							</view>
						</view>
					</template>

					<template #foot>
						<view class="" style="float: right;margin-bottom: 10rpx;">
							<text>食材:<text style="color: #ed7c1b;">1</text>种</text>
							<text style="padding: 0 30rpx;">合计:<text style="color: #ed7c1b;">32222</text> 元</text>
						</view>
					</template>
				</up-card>
			</view>
		</view>

		<view class="tabbar">
			<view class="all">
				<up-checkbox usedAlone shape="circle" v-model:checked="isAllChecked" />全选
			</view>
			<view class="sum">
				<text v-show="cartTotalPrice>0">已选择：{{cartTotalPrice}}</text>
				<view class="">
					<up-button class="button" @click="submitOrder">发货</up-button>
				</view>
			</view>
		</view>
	</view>





</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
		onMounted,
	} from 'vue'
	import czImg from '../../static/image/icon-大-米面.png'
	import dayjs from 'dayjs';



	const isAllChecked = computed({
		get() {
			// 列表中是否都选中了
			return orderList.value.every(el => el.isChecked == true)
		},
		set(value) {
			console.log(value)
			orderList.value.forEach(el => el.isChecked = value)
		}
	})

	// 合计
	const cartTotalPrice = computed(() => {
		var sum = 0
		orderList.value.forEach(el => {
			if (el.isChecked) {
				sum++
			}
		})
		console.log('sum', sum)
		return sum
	})



	// 模拟从后台拿到的数据
	const orderList = ref([{
			orederNo: "10320240427162420498",
			scholl: '新景镇长依村小',
			date: dayjs().format('MM-DD HH:mm'),
			imgUrl: czImg
		},
		{
			orederNo: "11234567899999",
			scholl: '铜仁市第一中学',
			date: dayjs().format('MM-DD HH:mm'),
			imgUrl: czImg
		}
	])





	const submitOrder = () => {
		console.log('submitOrder')
		// 提交选中的订单列表
		var cartList = [];
		orderList.value.forEach(el => {
			if (el.isChecked) {
				cartList.push(el)
			}
			console.log('cartList', cartList)

		})
	}


	const orderDetails = () => {
		uni.navigateTo({
			url: "/pages/order/details"
		})
	}

	onMounted(() => {

		orderList.value.forEach((el) => el.isChecked = false)
	})
</script>

<style lang="scss" scoped>
	.warp {
		height: 100vh;
		border: 1px solid red;

		.middle {

			/*  #ifdef H5 */
			margin-top: 110rpx;
			/*  #endif  */
			/*  #ifdef MP-WEIXIN */
			margin-top: 200rpx;
			/*  #endif  */
		}

		// 底部导航
		.tabbar {
			width: 100%;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			border: 1rpx solid green;
			position: fixed;
			/*  #ifdef H5 */
			bottom: 100rpx;
			/*  #endif  */
			/*  #ifdef MP-WEIXIN */
			bottom: 0;
			/*  #endif  */

			.all {
				display: flex;
				align-items: center;
				margin-left: 30rpx;
			}

			::v-deep.sum {
				display: flex;
				align-items: center;

				.u-button {
					width: 200rpx;
					color: #fff;
					background-color: #adb4be;
				}

				text {
					margin-right: 30rpx;
				}
			}
		}
	}
</style>